<template>
  <div class="add">
    <header>
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <h3>发布房源</h3>
      <i></i>
    </header>
    <main>
      <div class="am-list">
        <div class="am-list-header">房源信息</div>
        <div class="am-list-body">
          <div class="am-list-item">
            <div class="am-list-line">
              <span class="list-span">小区名称</span>
              <p>
                <input
                  class="ipt"
                  type="text"
                  @click="IptSearch"
                  placeholder="请输入小区名称"
                />
                <span><i class="iconfont icon-angle-right"></i></span>
              </p>
              <!-- <Search v-show="show" 
              :dialog_visible="dialog_visible"
              v-on:childClick='listenToMyBoy'></Search> -->
            </div>
          </div>
          <div class="am-list-item">
            <div class="am-list-line">
              <span class="list-span">租金</span>
              <p>
                <input placeholder="请输入租金/月" type="text" value="" />
                <span>￥/月</span>
              </p>
            </div>
          </div>
          <!-- 建筑面积 -->
          <div class="am-list-item">
            <div class="am-list-line">
              <span class="list-span">建筑面积</span>
              <p>
                <input placeholder="请输入建筑面积" type="text" value="" />
                <span>m<sup>2</sup></span>
              </p>
            </div>
          </div>
          <!-- 户型 -->
          <div class="am-list-item">
            <div class="am-list-line">
              <span class="list-span">户型</span>
              <!-- 判断是否显示户型 -->
              <span ref="spanValType" v-if="typeShow"
                >{{ valueType }}<i class="iconfont icon-angle-right"></i>
              </span>
              <span v-else @click="choice"
                >请选择<i class="iconfont icon-angle-right"></i>
              </span>
            </div>
            <!-- bottom弹窗 -->
            <van-popup
              v-model="typeShow"
              position="bottom"
              :style="{ height: '45%' }"
            >
              <van-picker
                v-show="typeShow"
                title="标题"
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
              />
            </van-popup>
          </div>
          <div class="am-list-item">
            <div class="am-list-line">
              <span class="list-span">所在楼向</span>
              <!-- 判断 选中值就显示在页面 -->
              <span ref="spanVals" v-if="falg"
                >{{ value }}<i class="iconfont icon-angle-right"></i>
              </span>
              <span v-else @click="choice1"
                >请选择<i class="iconfont icon-angle-right"></i>
              </span>
            </div>
            <van-popup
              v-model="falg"
              position="bottom"
              :style="{ height: '45%' }"
            >
              <van-picker
                v-show="falg"
                title="标题"
                show-toolbar
                @confirm="onConfirm1"
                :columns="columnsFloor"
              />
            </van-popup>
          </div>
          <div class="am-list-item">
            <div class="am-list-line">
              <span class="list-span">朝向</span>
              <span ref="spanVal" v-if="show"
                >{{ value }}<i class="iconfont icon-angle-right"></i>
              </span>
              <span v-else @click="choice2"
                >请选择<i class="iconfont icon-angle-right"></i>
              </span>
            </div>
            <van-popup
              v-model="show"
              position="bottom"
              :style="{ height: '45%' }"
            >
              <van-picker
                v-show="show"
                title="标题"
                show-toolbar
                :columns="columnsDir"
                @confirm="onConfirm2"
              />
            </van-popup>
          </div>
        </div>
      </div>
      <!-- 房屋标题 -->
      <div class="home-title">
        <div class="am-list-header">房源标题</div>
        <div class="am-list-line">
          <div class="am-input-control">
            <input
              placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <!-- 房屋图像 -->
      <div class="house-img">
        <div class="am-list-header">房屋图像</div>
        <!-- 上传图片文件 -->
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="4"
          :after-read="afterRead"
        />
      </div>
      <!-- 房屋配置 icon-->
      <div class="house-icon">
        <div class="am-list-header">房屋配置</div>
        <!-- 房屋配置icon -->
        <div class="am-list">
          <li
            v-for="(item, index) in houseIcon"
            ref="roomIcon"
            @click="handleAssort(item, index)"
            :key="index"
          >
            <i :class="item.i"></i>
            {{ item.label }}
          </li>
        </div>
      </div>
      <!-- 房屋描述 -->
      <div class="house-desc">
        <div class="am-list-header">房屋描述</div>
        <div class="am-textarea-control">
          <textarea
            rows="5"
            placeholder="请输入房屋描述信息"
            style="height: 124px"
          ></textarea>
        </div>
      </div>
    </main>
    <footer>
      <div class="cancel" @click="goCancel">取消</div>
      <div class="submit" @click="handleOn">提交</div>
    </footer>
    <!-- footer取消显示提示弹窗-->
    <van-dialog
      v-model="show1"
      title="提示"
      message="放弃发布房源？"
      show-cancel-button
      cancel-button-text="放弃"
      confirm-button-text="继续编辑"
      @confirm="goOn"
      @cancel="goBefore"
    >
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "../utils/axios";
// import Search from '../components/Search.vue';
export default {
  // components: {
  //   Search
  // },
  data() {
    return {
      falg: false, // floor
      show: false, /// dir
      typeShow: false,
      show1: false, ///点击取消
      value: "",
      valueType: "",
      // str:'',
      dialog_visible: false,
      fileList: [], /// 上传图片数组
      columns: ["一室", "二室", "三室", "四室", "四室+"],
      columnsFloor: ["高楼层", "中楼层", "低楼层"],
      columnsDir: ["东", "西", "南", "北", "东南", "东北", "西南", "西北"],
      houseIcon: [
        /// 房屋配置icon
        { i: "iconfont icon-yigui", label: "衣柜" },
        { i: "iconfont icon-xiyiji", label: "洗衣机" },
        { i: "iconfont icon-kongtiao", label: "空调" },
        { i: "iconfont icon-tianranqi-01", label: "天然气" },
        { i: "iconfont icon-bingxiang", label: "冰箱" },
        { i: "iconfont icon-nuanqi", label: "暖气" },
        { i: "iconfont icon-dianshi", label: "电视" },
        { i: "iconfont icon-haofangtuo400iconfont2reshuiqi", label: "热水器" },
        { i: "iconfont icon-wangluo", label: "宽带" },
        { i: "iconfont icon-shafa", label: "沙发" },
      ],
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    listenToMyBoy(msg) {
      this.$router.push("/search");
      this.childWords = msg; //获取到子组件传过来的值msg
    },
    choice() {
      /// 户型
      this.typeShow = !this.typeShow;
    },
    choice1() {
      this.falg = !this.falg;   /// 所在楼向
    },
    choice2() {
      this.show = !this.show;/// 朝向
    },
    onConfirm(value) {
      this.valueType = value;
      this.$refs.spanValType.innerHTML = value;
      this.typeShow = !this.typeShow;
    },
    onConfirm1(value) {
      this.value = value;
      this.$refs.spanVals.innerHTML = value;
      this.falg = !this.falg;
    },
    onConfirm2(value) {
      this.value = value; /// 点击确定显示选中内容
      this.$refs.spanVal.innerHTML = value;
      this.show = !this.show;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      if (this.fileList.length > 4) {
        this.fileList.splice(1);
        this.$toast({
          text: "只能选择这么多!",
          type: "info",
        })
        return false;
      }
      let Files = this.Files;
      Files.push(file.file);
      console.log(file);
    },
    goCancel() {
      /// 点击弹窗取消按钮
      this.show1 = !this.show1;
    },
    goOn() {
      this.show = false;  /// 点击继续编辑
    },
    goBefore() {  /// 点击放弃返回上一页
      this.$router.push("/home/page");
    },
    handleOn() {
      console.log(13462);
      if (this.value === "") {
        this.$toast("请输入对应内容！！！");
      } else {
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        // this.$toast("发布完成");
      }
    },
    IptSearch() { /// 搜索
      this.$router.push("/search");
    },
    getParams() { /// 发布房源icon
      axios.get("/houses/params").then((res) => {
        console.log(res, "icons");
        this.houseIcon.forEach((v) => {
          res.data.body.supporting.map((item) => {
            if (v.title == item.label) {
              Object.assign(v, item);
              return v;
            }
          })
        })
      })
    },
    handleAssort(item, index) { /// 房屋配置icon多选   
      this.$refs.roomIcon[index].classList.toggle("active");
    }
  }
}
</script>

<style lang='scss' scoped>
.add {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f6f5f6;
  header {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3rem;
    h3 {
      font-weight: normal;
    }
  }
}
main {
  flex: 1;
  overflow-y: scroll;
}
.am-list {
  width: 100%;
  height: auto;
}
.am-list-header {
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: #fff;
  font-size: 15px;
  padding: 0 0.2rem;
  border-bottom: 1px solid #eee;
}
.am-list-body {
  position: relative;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  .am-list-item {
    height: 0.8rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    font-size: 15px;
    color: #888;
    border-bottom: 1px solid #eee;
  }
}
.am-list-line {
  width: 100%;
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.2rem;
  .list-span {
    width: 1.7rem;
  }
  p {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    input {
      flex: 1;
      outline: none;
      border: none;
    }
    .ipt {
      text-align: right;
    }
  }
}
.home-title {
  min-height: 50px;
  background-color: #fff;
  padding-bottom: 0.1rem;
  .am-list-line {
    position: relative;
    display: flex;
    align-self: stretch;
    padding-right: 20px;
    overflow: hidden;
  }
  .am-input-control {
    width: 100%;
    input {
      color: #eee;
      font-size: 14px;
      appearance: none;
      width: 100%;
      border: none;
      outline: none;
      background-color: transparent;
    }
  }
}
.house-img {
  width: 100%;
  height: 2.56rem;
  background-color: #fff;
  .am-list-header {
    color: #666;
  }
  .van-uploader{
    padding: 0.1em 0;
  }
}
.house-icon {
  width: 100%;
  height: 3.2rem;
  border-bottom: 1px solid #eee;
  .am-list-header {
    color: #666;
    border-bottom: 1px solid #eee;
  }
  .am-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: calc(100% / 5);
      height: 1.2rem;
      text-align: center;
      font-size: 14px;
      background-color: #fff;
      i {
        display: block;
        font-size: 22px;
        margin: 4px 0;
      }
    }
    .active {
      color: #21b97a;
    }
  }
}
footer {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  .cancel {
    text-align: center;
    box-sizing: border-box;
    flex: 1;
    margin-left: 0.16rem;
    min-width: 0.2rem;
  }
  .submit {
    flex: 1;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    background-color: #21b97a;
  }
}
/// 房屋描述
.house-desc {
  width: 100%;
  height: 3.6rem;
  margin-top: 0.4rem;
}
.am-textarea-control {
  width: 100%;
  textarea {
    color: #000;
    font-size: 15px;
    line-height: 25.5px;
    appearance: none;
    width: 100%;
    padding: 0.2rem;
    border: 0;
    background-color: #fff;
    overflow: visible;
    display: block;
  }
}
</style>